<template>

  <div>

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="jump">作业管理</el-menu-item>
      <el-menu-item index="2">文件管理</el-menu-item>
    </el-menu>
    <div class="line"></div>


    <el-row style="font-size: 27px">
    <el-row>
      <el-col :span="8">
        <el-button size="small" icon="el-icon-plus" @click="newFolder">新建文件夹</el-button>
        <el-button style="margin-left: 0px" size="small" icon="el-icon-upload" @click="uploadFileToFolder">上传文件</el-button>
      </el-col>
      <el-col :span="16">
        <el-button-group>
          <el-button size="small" icon="el-icon-edit" @click="editName">重命名</el-button>
          <el-button size="small" icon="el-icon-delete" @click="handleDelete">删  除</el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px;">
      <el-card>
        <el-tree

            :data="data"
            :props="defaultProps"
            ref="folderTree"
            accordion
            highlight-current
            @node-click="handleNodeClick">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <i :class="folderIcon(node,data)" :style="{'color': data.type==='folder'? '#FFD248':''}"></i>&nbsp;{{ data.label }}
            </span>
          </span>
        </el-tree>
      </el-card>
      <el-dialog title="上传文件" :visible.sync="showUploadFile" :top="'7vh'" @close="closeUploadFile">
        <el-form :model="uploadFileObject">
          <el-form-item label="文件" :label-width="'200px'">
            <el-upload
                ref="upload"
                class="upload-demo"
                drag
                action=""
                :http-request="httpRequest"
                :before-remove="beforeRemove"
                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showUploadFile = false">取 消</el-button>
          <el-button type="primary" @click="submitDocument">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </el-row>
  </div>
</template>

<script>

export default {
  name: "FileBank",
  data(){
    return {
      activeIndex: '2',
      activeIndex2: '2',
      data: [{
        label: '一级 1',
        type: 'folder',
        children: [{
          label: '二级 1-1',
          type: 'folder',
          children: [{
            label: '文件一.pdf',
            type: 'file',
            url: ''
          }]
        },{
          label: '文件一.docx',
          type: 'file',
        }]
      }, {
        label: '一级 2',
        type: 'folder',
        children: [{
          label: '二级 2-1',
          type: 'folder',
          children: [{
            type: 'file',
            label: '文件一.docx'
          }]
        }, {
          label: '二级 2-2',
          type: 'folder',
          children: [{
            type: 'file',
            label: '文件一.pptx'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      showUploadFile: false,
      uploadFileObject: {
        name: '',
        fileList: []
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {

    },
    jump(){
      this.$router.go(-1)
    },
    handleNodeClick(data) {
      if (data.type === 'file'){

      }
    },
    newFolder(){
      let v = {
        label: '',
        type: 'folder',
        children: []
      }
      if (this.$refs.folderTree.store.currentNode){
        if (this.$refs.folderTree.store.currentNode.expanded){
          v.label = this.judgeFolderName(this.$refs.folderTree.store.currentNode.data.children,0)
          this.$refs.folderTree.store.currentNode.data.children.push(v)
        }else {
          if (this.$refs.folderTree.store.currentNode.parent.parent){
            v.label = this.judgeFolderName(this.$refs.folderTree.store.currentNode.data.children,0)
            this.$refs.folderTree.store.currentNode.data.children.push(v)
          }else {
            if (this.$refs.folderTree.store.currentNode.childNodes.length === 0){
              v.label = this.judgeFolderName(this.$refs.folderTree.store.currentNode.data.children,0)
              this.$refs.folderTree.store.currentNode.data.children.push(v)
            }else {
              v.label = this.judgeFolderName(this.data,0)
              this.data.push(v)
            }
          }
        }
      }else {
        v.label = this.judgeFolderName(this.data,0)
        this.data.push(v)
      }
    },
    judgeFolderName(data,i){
      let item = ''
      if (i === 0){
        item = '新建文件夹'
      }else {
        item = '新建文件夹' + (i+1)
      }
      if (!this.isNameExist(data,item)) return item
      else return this.judgeFolderName(data,i+1)
    },
    isNameExist(data,item){
      let flag = false
      for (let i=0;i<data.length;i++){
        if (data[i].label === item){
          flag = true
        }
      }
      return flag
    },
    editName(){
      if (this.$refs.folderTree.store.currentNode){
        this.$prompt('请输入名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$refs.folderTree.store.currentNode.data.label = value
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      }else {
        this.$message.warning('请选择文件或文件夹')
      }
    },
    handleDelete(){
      if (this.$refs.folderTree.store.currentNode){
        this.$confirm('此操作将永久删除该文件或文件夹, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.folderTree.remove(this.$refs.folderTree.store.currentNode)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }else {
        this.$message.warning('请选择文件或文件夹')
      }
    },
    closeUploadFile(){
      this.uploadFileObject = {
        name: '',
        chapter: 1,
        fileList: []
      }
      this.$refs.upload.clearFiles()
    },
    httpRequest(option) {
      this.uploadFileObject.fileList.push(option.file)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    submitDocument(){
      let v = {
        label: this.uploadFileObject.fileList[0].name,
        type: 'file',
      }
      if (this.$refs.folderTree.store.currentNode){
        this.$refs.folderTree.store.currentNode.data.children.push(v)
      }else {
        this.data.push(v)
      }
      this.showUploadFile = false
    },
    uploadFileToFolder(){
      this.showUploadFile = true
    }
  },
  computed: {
    folderIcon(){
      return function (node,data){
        if (data.type === 'folder'){
          if (node.expanded){
            return 'el-icon-folder-opened'
          }
          return 'el-icon-folder'
        }else {
          return 'el-icon-document'
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
